<template>
  <div class="home">
    <div class="name">违规投诉</div>
    <div class="center">
      <el-button
        @click="dialogVisible = true"
        style="margin-bottom: 20px"
        type="success"
        >去投诉</el-button
      >
      <el-table :data="list" style="width: 100%"  class="pointer">
        <el-table-column align="center" label="序号" type="index" width="150">
        </el-table-column>
        <el-table-column prop="title" label="投诉标题"> </el-table-column>
        <el-table-column
          align="center"
          prop="creationTime"
          label="创建时间"
          width="180"
        >
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.creationTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          width="180"
          label="处理状态"
          :filters="[
            { text: '正在处理中', value: '0' },
            { text: '处理完成', value: '1' },
          ]"
          :filter-method="filterTag"
        >
          <template slot-scope="scope">
            <span
              :style="
                scope.row.complaintType == 0
                  ? 'color: #f79a23;'
                  : 'color: #666666;'
              "
              >{{
                scope.row.complaintType == 0 ? "正在处理中" : "处理完成"
              }}</span
            >
          </template>
        </el-table-column>
        <el-table-column width="100" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="goToDetails(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page.sync="currentPage"
          @current-change="getList"
          hide-on-single-page
        ></el-pagination>
      </div>
    </div>
    <el-dialog
      title="投诉"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <div style="padding: 0 30px" class="dialog_body">
        <el-form
          :rules="rules"
          label-position="left"
          :model="form"
          label-width="100px"
        >
          <el-form-item prop="title" label="投诉标题">
            <el-input
              v-model="form.title"
              placeholder="请输入投诉标题"
            ></el-input>
          </el-form-item>
          <el-form-item prop="complaintText" label="投诉内容">
            <el-input
              resize="none"
              type="textarea"
              rows="5"
              v-model="form.complaintText"
              placeholder="请输入投诉内容"
            ></el-input>
          </el-form-item>
          <el-form-item prop="contactPerson" label="联系人">
            <el-input
              v-model="form.contactPerson"
              placeholder="请输入联系人"
            ></el-input>
          </el-form-item>
          <el-form-item prop="contactNumber" label="联系人电话">
            <el-input
              v-model="form.contactNumber"
              placeholder="请输入联系人电话"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="InitiateComplaint"
          >发起投诉</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getComplaintList, setComplaint } from "@/api/procurement/complaint";
export default {
  data() {
    return {
      list: [],
      currentPage: 1,
      total: 0,
      pageSize: 10,
      dialogVisible: false,
      form: {},
      rules: {
        title: [{ required: true, message: "请输入投诉标题", trigger: "blur" }],
        complaintText: [
          { required: true, message: "请输入投诉内容", trigger: "blur" },
        ],
        contactPerson: [
          { required: true, message: "请输入联系人", trigger: "blur" },
        ],
        contactNumber: [
          { required: true, message: "请输入联系人电话", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 发起投诉
    InitiateComplaint() {
      let regular = /^1[3-9][0-9]{9}$/;
      if (!regular.test(this.form.contactNumber)) {
        this.$message.warning("请输入正确的手机格式！");
        return;
      }
      setComplaint(this.form).then((res) => {
        console.log(res);
        if (res.code) {
          this.$message.success("投诉已发送，请等待处理。");
        } else {
          this.$message.warning("投诉失败");
        }
        this.getList();
        this.handleClose();
      });
    },
    handleClose() {
      this.dialogVisible = false;
      this.form = {};
    },
    filterTag(value, row) {
      return row.complaintType == value;
    },
    // 跳转到详情页
    goToDetails(row) {
      console.log(row.complaintId);
      this.$router.push({
        name: "complaintDetails",
        query: {
          complaintId: row.complaintId,
        },
      });
    },
    // 获取列表
    getList() {
      getComplaintList({
        pageIndex: this.currentPage,
        pageSize: this.pageSize,
      }).then((res) => {
        this.list = res.data;
        this.total = res.total;
      });
    },
  },
};
</script>
<style  scoped>
.home {
  background-color: #fbfbfb;
  padding-bottom: 100px;
  min-height: 788px;
}
.name {
  font-size: 30px;
  font-weight: 600;
  text-align: center;
  padding: 25px 0;
}
.page {
  float: right;
  padding: 30px 0;
}
</style>
